<template>
  <div class="app-container">
    <el-card class="m-b-20">
      <el-form ref="queryForm" :inline="true" :rules="rules" :model="queryData">
        <el-form-item label="类名称" prop="className">
          <el-input v-model="queryData.className" placeholder="类名称" />
        </el-form-item>
        <el-form-item label="包路径" prop="packageName">
          <el-input v-model="queryData.packageName" placeholder="包路径" />
        </el-form-item>
        <el-form-item label="JPA注解" prop="jpaAnnotationFlag">
          <el-radio-group v-model="queryData.jpaAnnotationFlag" size="small">
            <el-radio :label="true">包含</el-radio>
            <el-radio :label="false">不包含</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="swagger注解" prop="swaggerAnnotationFlag">
          <el-radio-group v-model="queryData.swaggerAnnotationFlag" size="small">
            <el-radio :label="true">包含</el-radio>
            <el-radio :label="false">不包含</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-row>
          <p>
            行号：<el-switch v-model="showNumber" />
            检查：<el-switch v-model="lint" />
            <el-button class="fr m-l-10" @click="handlePreview('json')">预览</el-button>
            <el-button class="fr" @click="handleSchema">转Schema</el-button>
            <el-button class="fr" @click="handleFormat">格式化</el-button>
            <el-button class="fr" @click="handleReplace">去转义</el-button>
          </p>
        </el-row>
        <el-card>
          <b-code-editor class="code-editor" v-model="jsonCode" theme="material" :auto-format="false"
          ref="json-editor"
          :show-number="showNumber" :readonly="false" :lint="lint"/>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix">
            <span>生成JSONSchema</span>
            <el-button class="fr" @click="handlePreview('jsonSchema')">预览</el-button>
          </div>
          <json-schema-editor :value="jsonschema"/>
        </el-card>
      </el-col>
    </el-row>

    <!-- 预览界面 -->
    <el-dialog title="预览" :visible.sync="preview.open" width="90%" top="5vh" append-to-body class="scrollbar">
      <el-row :gutter="10">
        <el-tabs v-model="preview.activeName">
          <el-tab-pane v-for="item in preview.data"
                       :label="item.path.substring(item.path.lastIndexOf('\\') + 1)"
                       :name="item.path"
                       :key="item.path">
            <el-link
              :underline="false"
              icon="el-icon-document-copy"
              v-clipboard:copy="item.code"
              v-clipboard:success="clipboardSuccess"
              style="float:right"
            >
              复制
            </el-link>
            <el-card>
              <pre><code class="hljs" style="max-height: calc(55vh - 10px); overflow-y: auto;" v-html="highlightedCode(item)"></code></pre>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { previewJsonSchema } from '@/api/tool/generator'

import 'json-schema-editor-vue/lib/json-schema-editor-vue.css'
import 'highlight.js/styles/github.css'
const hljs = require('highlight.js/lib/core')
hljs.registerLanguage('java', require('highlight.js/lib/languages/java'))
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'))
hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'))
hljs.registerLanguage('vue', require('highlight.js/lib/languages/xml'))
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'))
hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'))
hljs.registerLanguage('typescript', require('highlight.js/lib/languages/typescript'))

export default {
  data() {
    return {
      queryData: {
        className: '',
        packageName: '',
        jpaAnnotationFlag: false,
        swaggerAnnotationFlag: true
      },
      rules: {
        className: [{ required: true, message: '请填写内容' }],
        packageName: [{ required: true, message: '请填写内容' }]
      },
      jsonCode: '',
      showNumber: true,
      lint: true,
      jsonschema: {
        root: {
          type: "object"
        }
      },
      // 预览参数
      preview: {
        open: false,
        data: {},
        activeName: ''
      }
    }
  },
  methods: {
    highlightedCode(item) {
      let language = item.path.substring(item.path.lastIndexOf('.') + 1)
      const result = hljs.highlight(language, item.code || '', true)
      return result.value || '&nbsp;'
    },
    clipboardSuccess() {
      this.$modal.msgSuccess('复制成功')
    },
    handleFormat() {
      if (this.jsonCode) {
        this.$refs['json-editor'].formatCode()
      }
    },
    handleReplace() {
      this.jsonCode = this.jsonCode.replace(/<\/?.+?\/?>|\r|\n|\s*/g,'')
    },
    handleSchema() {
      window.open('https://tooltt.com/json2schema/', '_blank')
    },
    handlePreview(sourceType) {
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          if ('json' === sourceType && this.jsonCode) {
            this.queryData.jpaAnnotationFlag = false
            this.queryData.swaggerAnnotationFlag = false
            this.queryData.jsonschema = this.jsonCode
          } else if ('jsonSchema' === sourceType && this.jsonschema.root.properties) {
            this.queryData.jsonschema = JSON.stringify(this.jsonschema.root)
          }

          previewJsonSchema(sourceType, this.queryData).then(response => {
            this.preview.data = response.param
            const activePath = response.param[0].path
            this.preview.activeName = activePath
            this.preview.open = true
          })
        }
      })
    }
  }
}
</script>
